<template>
	<div class="themebox">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div>
					<van-nav-bar title="闪兑" left-text left-arrow>
						<van-icon name="ellipsis" slot="right" size="24px" @click="show=true" />
					</van-nav-bar>
					<!-- 参考报价 -->

					<div class="quote">
						<van-row>
							<van-col span="6">
								<div class="btn">参考报价</div>
							</van-col>
							<van-col span="16">
								<ul>
									<li>
										<img src="../../assets/images/kui.png" alt />
										<span>kuiisin</span>
										<i>|</i>
									</li>
									<li>
										<span>HEI/DKAD</span>
										<i>|</i>
									</li>
									<li>
										<span>184.545324656</span>
									</li>
								</ul>
							</van-col>
							<van-col span="2">
								<img id="img1" src="../../assets/images/jiantou.png" alt @click="quoteshow = !quoteshow" />
							</van-col>
						</van-row>
					</div>

					<!-- <transition name="fade"> -->
					<span v-if="quoteshow">
            <van-row class="quote Show">
              <van-col span="6"></van-col>
              <van-col span="18">
                <ul>
                  <li>
                    <img src="../../assets/images/kui.png" alt />
                    <span>kuiisin</span>
					<i>|</i>
					</li>
					<li>
						<span>HEI/DKAD</span>
						<i>|</i>
					</li>
					<li>
						<span>184.545324656</span>
					</li>
					</ul>
					</van-col>
					</van-row>
					<van-row class="quote Show">
						<van-col span="6"></van-col>
						<van-col span="18">
							<ul>
								<li>
									<img src="../../assets/images/kui.png" alt />
									<span>kuiisin</span>
									<i>|</i>
								</li>
								<li>
									<span>HEI/DKAD</span>
									<i>|</i>
								</li>
								<li>
									<span>184.545324656</span>
								</li>
							</ul>
						</van-col>
					</van-row>
					</span>
					<!-- </transition> -->
					<!-- <van-row>
      <div class="quote Show">
        <van-col span="6"></van-col>
        <van-col span="18">
          <ul>
            <li>
              <img src="../assets/images/kui.png" alt />
              <span>kuiisin</span>
              <i></i>
            </li>
            <li>
              <span>HEI/DKAD</span>
              <i></i>
            </li>
            <li>
              <span>184.545324656</span>
            </li>
          </ul>
        </van-col>
      </div>
          </van-row>-->

					<!-- <div class="quote">
      <div class="btn">参考报价</div>
      <ul>
        <li>
          <img src="../assets/images/kui.png" alt />
          <span>kuiisin</span>
          <i></i>
        </li>
        <li>
          <span>HEI/DKAD</span>
          <i></i>
        </li>
        <li>
          <span>184.545324656</span>
        </li>
      </ul>
      <img src="../assets/images/jiantou.png" alt />
    </div>

    <div class="quoteShow">
      <ul>
        <li>
          <img src="../assets/images/kui.png" alt />
          <span>kuiisin</span>
          <i></i>
        </li>
        <li>
          <span>HEI/DKAD</span>
          <i></i>
        </li>
        <li>
          <span>184.545324656</span>
        </li>
      </ul>
          </div>-->

					<!-- 内容 -->
					<div class="content">
						<div class="pull">
							<div class="pullLeft" @click="show1=true">
								<img src="../../assets/images/lingxin.png" alt />
								<span>ETH</span>
								<img src="../../assets/images/xiajiantou.png" alt />
							</div>
							<div class="pullRight" @click="show1=true">
								<img src="../../assets/images/txing.png" alt />
								<span>USDT</span>
								<img src="../../assets/images/xiajiantou.png" alt />
							</div>
							<img id="xuanzhuan" class="xuanzhuan" src="../../assets/images/xuanzhuan.png" alt />
						</div>

						<div class="group">
							<div class="groupLeft">
								<div class="ExportMnemonic-content">
									<van-field v-model="password" placeholder="转出数量"></van-field>
								</div>
								<!-- <van-field v-model="value" placeholder="转出数量" /> -->
							</div>
							<div class="groupRight">
								<van-field style="text-align: right" v-model="value" placeholder="收到数量" />
							</div>
						</div>
						<div class="parities">
							<div style="color:#999999">汇率</div>
							<p>1ETH=184.54 USDT</p>
							<img src="../../assets/images/duihuan.png" alt />
						</div>
					</div>

					<!-- 按钮 -->
					<van-button type="info">闪电兑换</van-button>

					<!-- 更多 -->
					<!-- <van-popup v-model="show"  position="bottom">内容</van-popup> -->
					<van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />

					<!-- 选择币种 -->
					<div class="popserbox">
						<van-popup v-model="show1" position="bottom">
							<!-- 搜索框 -->

							<van-search placeholder="请输入ToKen名称或合约地址" v-model="value" style="margin-botton:10px" />

							<van-cell-group class="groupBz" @click="group">
								<img src="../../assets/images/txing.png" alt />
								<span class="tft">TFT</span>
								<span class="lve">
                  余额
                  <span>0</span>
								</span>
								<van-icon slot="right-icon" name="success" style="line-height: inherit;" />
							</van-cell-group>
							<div>
								<van-cell-group class="groupBz">
									<img src="../../assets/images/txing.png" alt />
									<span class="tft">TFT</span>
									<span class="lve">
                    余额
                    <span>0</span>
									</span>
									<div class="hook">
										<van-icon name="success" />
									</div>
								</van-cell-group>
							</div>
							<van-cell-group class="groupBz">
								<img src="../../assets/images/txing.png" alt />
								<span class="tft">TFT</span>
								<span class="lve">
                  余额
                  <span>0</span>
								</span>
							</van-cell-group>
							<van-cell-group class="groupBz">
								<img src="../../assets/images/txing.png" alt />
								<span class="tft">TFT</span>
								<span class="lve">
                  余额
                  <span>0</span>
								</span>
							</van-cell-group>
							<van-cell-group class="groupBz">
								<img src="../../assets/images/txing.png" alt />
								<span class="tft">TFT</span>
								<span class="lve">
                  余额
                  <span>0</span>
								</span>
							</van-cell-group>
						</van-popup>
					</div>
					<!-- 兑换规则 -->
					<!-- <van-popup class="backups" v-model="show2" closeable>
      <div class="shanze">兑换规则</div>

      <div class="shanze">
        <h3>闪兑规则</h3>
      </div>

      <p
        class="guinei"
      >助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失</p>
   
          </van-popup>-->
					<div class="receivables" v-if="explainIm">
						<div class="duiBox" v-clickoutside="handleClose">
							<div class="dui-title">兑换规则</div>
							<div class="dui-center">
								<div class="shanze">闪兑规则</div>
								<div class="guinei">
									助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失助记词可用于恢复身份下钱包资产,防止忘记助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失助记词可用于恢复身份下钱包资产 ,防止忘密码,应用删除、手机丢失等情况导致资产损失助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失
								</div>
							</div>
							<img @click="explainIm=false" src="../../assets/images/yuancha_03.png" alt />
						</div>
					</div>

					<!-- 历史汇率 -->
					<van-popup style="height: 350px !important;" class="popuplishi" v-model="show3">
						<img @click="show3=false" style="z-index:3001" src="../../assets/images/lancha_03.png" alt />
						<img class="baidiyuan" src="../../assets/images/baidiyuan_03.png" alt />
						<div class="shanze">ETH/USDT 历史汇率</div>
						<van-cell style="color: #999999;" value="2019/10/15  14:00">
							<!-- 使用 title 插槽来自定义标题 -->
							<template slot="title">
								<span class="custom-title">时间</span>
							</template>
							<!-- <template  slot="right">
          <span class="custom-title">2019/10/15  14:00</span>
              </template>-->
						</van-cell>
						<!-- <van-cell style="color: #999999;" value="184.47">
          <template slot="title">
            <span class="custom-title">汇率</span>
          </template>
            </van-cell>-->
						<div class="hui-lv">
							<div class="huiLeft">汇率</div>
							<div class="huiRight">184.47</div>
						</div>
						<!-- 图表 -->
						<div id="main" style="width:300px;height:215px;margin: 0 auto;"></div>
						<div style="margin: 0px 10px;border-top: 1px solid #ebedf0;line-height:25px;height:25px;font-size:14px">2019/14/14</div>
					</van-popup>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import echarts from "echarts";

	// Vue.directive("clickoutside", {
	//   bind: function(el, binding, vnode) {
	//     function documentHandler(e) {
	//       if (el.contains(e.target)) {
	//         return false;
	//       }
	//       if (binding.value) {
	//         binding.value(e);
	//       }
	//     }
	//     el.__vueClickOutside__ = documentHandler;
	//     document.addEventListener("click", documentHandler);
	//   },
	//   unbind: function(el, binding) {
	//     document.removeEventListener("click", el.__vueClickOutside__);
	//     delete el.__vueClickOutside__;
	//   }
	// });

	export default {
		data() {
			return {
				show: false,
				show1: false,
				// show2: false,
				show3: true,
				quoteshow: false,
				explainIm: false,
				actions: [{
						name: "交易授权"
					},
					{
						name: "授权管理"
					},
					{
						name: "闪兑教程"
					}
				]
			};
		},
		directives: {
			clickoutside: {
				bind: function(el, binding, vnode) {
					function documentHandler(e) {
						if(el.contains(e.target)) {
							return false;
						}
						if(binding.value) {
							binding.value(e);
						}
					}
					el.__vueClickOutside__ = documentHandler;
					document.addEventListener("click", documentHandler);
				},
				unbind: function(el, binding) {
					document.removeEventListener("click", el.__vueClickOutside__);
					delete el.__vueClickOutside__;
				}
			}
		},
		methods: {
			handleClose(e) {
				this.explainIm = false;
			},
			onSelect(item) {
				console.log(item.name);
				if(item.name === "授权管理") {
					this.$router.push({
						path: "/Accredit"
					});
				}
				if(item.name === "闪兑教程") {
					// this.show2 = true;
					this.explainIm = true;
				}
			},
			showChange() {},
			group(Event) {
				console.log(Event.value);
			}
		},
		mounted() {
			var current = 0;
			document.getElementById("img1").onclick = function() {
				current = (current + 180) % 360;
				this.style.transform = "rotate(" + current + "deg)";
			};

			// var current1 = 0;
			// document.getElementById("xuanzhuan").onclick = function() {
			//   current1 = (current1 + 180) % 360;
			//   this.style.transform = "rotate(" + current1 + "deg)";
			// };

			//图表
			var myChart = echarts.init(document.getElementById("main"));

			var option = {
				// title: {text: 'Line Chart'},
				tooltip: {},
				// toolbox: {
				//     feature: {
				//         dataView: {},
				//         saveAsImage: {
				//             pixelRatio: 2
				//         },
				//         restore: {}
				//     }
				// },
				xAxis: {},
				yAxis: {},
				series: [{
					type: "line",
					smooth: true,
					data: [
						[12, 5],
						[24, 20],
						[36, 36],
						[48, 10],
						[60, 10],
						[72, 20]
					]
				}],
				itemStyle: {
					color: "#449ad4",
					shadowBlur: 200,
					shadowColor: "rgba(0, 0, 0, 0.5)"
				}
			};

			myChart.setOption(option);
		}
	};
</script>

<style lang="less" scoped>
	.themebox {
		background-color: #f2f4f5;
		height: 100%;
	}
	
	// .fade-enter-active, .fade-leave-active {
	// transition: opacity .5s;
	// }
	.van-nav-bar {
		.van-nav-bar__title {
			font-size: 15px;
		}
		.van-icon {
			// font-size: 1.5625rem;
			font-size: 18px;
			color: #333333 !important;
		}
	}
	
	.quote {
		background-color: #1f2239;
		height: 2.375rem;
		line-height: 2.375rem;
		.btn {
			width: 4.375rem;
			height: 1.5625rem;
			border-radius: 0.3125rem;
			background-color: #313553;
			color: #c4c9e9;
			font-size: 12px;
			line-height: 1.5625rem;
			text-align: center;
			display: inline-block;
			margin-left: 0.9375rem;
		}
		ul {
			// float: left;
			display: inline-block;
			li {
				display: inline-block;
				height: 0.9375rem;
				img {
					display: inline-block;
					// display: block;
					height: 0.9375rem;
					width: 0.9375rem;
					vertical-align: middle;
					margin-left: 8px;
				}
				// .img1:hover {
				// display: block;
				// transition: All 0.4s ease-in-out;
				// transform: rotate(180deg);
				// }
				span {
					font-size: 12px;
					color: #fff;
				}
				i {
					// border-right: 1px solid #fff;
					margin: 0 5px;
					color: #fff;
					font-style: normal;
				}
			}
		}
		img {
			display: inline-block;
			width: 20px;
			// height: 0.9375rem;
			// width: 18px;
			margin-left: 4px;
			vertical-align: middle;
			margin-top: -2px;
		}
	}
	
	.van-cell:not(:last-child)::after {
		border-bottom: 0px;
	}
	
	.content::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background-color: #f2f4f5;
		z-index: 10;
		top: 132px;
		left: -10px;
	}
	
	.content::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background-color: #f2f4f5;
		z-index: 10;
		top: 132px;
		right: -10px;
	}
	
	// 内容
	.content {
		padding: 0px 20px;
		// width: 315px;
		margin: 0 10px;
		// height: 12.5rem;
		// background-color: pink;
		// margin: 0 auto;
		margin-top: 0.625rem;
		border-radius: 10px;
		position: relative;
		background-color: #fff;
		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			border-width: 0;
		}
		.pull {
			display: flex;
			border-bottom: 1px solid #f2f4f5;
			.xuanzhuan {
				position: absolute;
				display: inline-block;
				width: 35px;
				height: 35px;
				top: 50px;
				// left: 155px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1000;
				border-radius: 18px;
			}
			.pullLeft {
				height: 4.375rem;
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				span {
					margin: 0 6px;
				}
				img {
					display: inline-block;
					width: 1.5625rem;
					height: 1.5625rem;
				}
			}
			.pullRight {
				height: 4.375rem;
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				span {
					margin: 0 6px;
				}
				img {
					display: inline-block;
					width: 1.5625rem;
					height: 1.5625rem;
				}
			}
		}
		.group {
			display: flex;
			border-bottom: 1px dashed #f2f4f5;
			.groupLeft {
				height: 4.375rem;
				flex: 1;
				box-sizing: border-box;
				padding-top: 25px;
				.van-cell {
					// line-height: 50px;
					font-size: 17px;
					padding: 10px 5px 5px;
				}
			}
			.groupRight {
				height: 4.375rem;
				box-sizing: border-box;
				padding-top: 25px;
				flex: 1;
				.van-cell {
					// line-height: 50px;
					font-size: 17px;
					// padding:30px 16px 10px;
					/deep/.van-field__control {
						text-align: right;
					}
				}
			}
		}
		.parities {
			margin-left: 5px;
			position: relative;
			height: 60px;
			div {
				color: #cccccc;
				margin: 5px 0;
			}
			p {
				display: inline-block;
				font-size: 15px;
				margin-right: 5px;
			}
			img {
				display: inline-block;
				width: 12px;
				// height: 15px;
				// vertical-align: middle;
			}
		}
		.parities::after {
			content: "";
			width: 12px;
			height: 12px;
			background-color: #45c36b;
			position: absolute;
			right: 23px;
			top: 22px;
			border-radius: 6px;
		}
	}
	
	// /deep/.van-field__control {
	// text-align: center;
	// }
	.van-button {
		display: block;
		width: 20.8125rem;
		// margin-left: 1.25rem;
		height: 50px;
		margin: 0 auto;
		margin-top: 1.375rem;
		border-radius: 8px;
	}
	
	.van-action-sheet__cancel,
	.van-action-sheet__item {
		color: #007be2;
	}
	
	// 选择币种
	.van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border-width: 0;
	}
	
	.popserbox {
		.van-popup--bottom {
			background-color: #f2f4f5;
			border-radius: 15px 15px 0 0;
		}
		.van-search {
			margin-bottom: 5px;
			border-radius: 12px 12px 0 0;
		}
	}
	
	/deep/.van-popup {
		// height: 21.875rem;
		// background-color: #ccc;
		div {
			// height: 60px;
			img {
				display: inline-block;
				width: 30px;
			}
		}
	}
	
	.groupBz::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		border-bottom: 1px solid #f1f3f4;
		left: 20px;
	}
	
	.groupBz {
		height: 60px;
		width: 100%;
		position: relative;
		img {
			position: absolute;
			top: 15px;
			left: 30px;
		}
		.tft {
			position: absolute;
			top: 15px;
			left: 65px;
			font-size: 14px;
		}
		.lve {
			position: absolute;
			top: 30px;
			left: 65px;
			font-size: 12px;
			color: #c2c2c2;
		}
		.hook {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 15px;
			color: #3394e8;
			font-size: 20px;
		}
	}
	
	#img1 {
		transition: All ease-in-out;
		// transform: rotate(180deg);
	}
	
	.xuanzhuan:hover {
		transition: All 0.4s ease-in-out;
		// transform: rotate(180deg);
	}
</style>

<style lang="less" scoped>
	.van-action-sheet__cancel {
		color: #333333;
	}
	
	.van-popup {
		overflow-y: inherit;
	}
	
	.hui-lv::before {
		content: "";
		position: absolute;
		border-bottom: 1px solid #ececec;
		top: 40px;
		width: 294px;
	}
	
	.hui-lv {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		line-height: 24px;
		padding: 0 16px;
		color: #9999;
		color: rgb(153, 153, 153);
		position: relative;
		.huiRight {
			color: #1dc996;
		}
	}
	
	.van-popup--center {
		.van-cell {
			padding: 0 16px;
		}
		width: 20.3125rem;
		// height: 18.75rem !important;
		border-radius: 15px;
		// background-color: #f2f4f5;
		overflow-y: 0;
		img {
			display: block;
			width: 30px;
			position: absolute;
			z-index: 3000;
			right: 0;
			top: 0;
			transform: translate(50%, -50%);
			// background-color: #fff;
			border-radius: 50%;
		}
		.baidiyuan {
			width: 20px;
		}
		.shanze {
			font-size: 1.25rem;
			font-weight: 700;
			display: flex;
			justify-content: center;
			// height: 4.6875rem;
			height: 60px;
			line-height: 60px;
			// line-height: 4.6875rem;
		}
		.guinei {
			font-size: 0.875rem;
			padding: 0 1.875rem;
			margin-bottom: 0.625rem;
			color: #666666;
		}
		.van-button {
			display: block;
			width: 17.8125rem;
			margin-left: 1.0625rem;
			margin-bottom: 5px;
		}
		.van-button--primary {
			border: 1px solid #fff;
		}
		.van-button--plain.van-button--primary {
			color: #a7a7a7;
		}
		.van-cell__value {
			color: #333333;
		}
		//   .van-cell__value:nth-child(2){
		//   color: #1dc996;
		// }
	}
	
	//  .van-cell:nth-child(2) {
	//     .van-cell__value {
	//       span {
	//         color: #1dc996;
	//       }
	//     }
	//     // color: #1dc996;
	//   }
	.van-popup--bottom.van-popup--round {
		border-radius: 0;
		padding: 17px 10px 7px;
		box-sizing: border-box;
		background-color: #f2f4f5;
	}
	
	.van-action-sheet__description {
		background-color: #fff;
		border-radius: 15px 15px 0 0;
	}
	
	.van-action-sheet__item:nth-child(1) {
		border-radius: 15px 15px 0px 0px;
	}
	
	.van-action-sheet__item:nth-child(3) {
		border-radius: 0 0 15px 15px;
	}
	
	.van-action-sheet__cancel {
		border-radius: 25px 25px 15px 15px;
	}
	
	//兑换规则
	.receivables {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		// background-color: #5c5c5c;
		z-index: 3000;
		.duiBox {
			width: 325px;
			height: 350px;
			background-color: #f2f5f5;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 10px;
			.dui-title {
				height: 50px;
				width: 100%;
				line-height: 50px;
				text-align: center;
				font-size: 15px;
				font-weight: 700;
			}
			.dui-center {
				width: 300px;
				height: 270px;
				background-color: #fff;
				position: absolute;
				top: 55%;
				left: 50%;
				transform: translate(-50%, -50%);
				.shanze {
					font-size: 20px;
					text-align: center;
					height: 80px;
					line-height: 80px;
					font-weight: 700;
				}
				.guinei {
					padding: 0 15px;
					color: #666666;
					font-size: 14px;
					line-height: 24px;
					height: 190px;
					box-sizing: content-box;
					overflow: hidden;
					max-height: 190px;
					overflow-y: scroll;
				}
			}
			img {
				display: block;
				width: 25px;
				position: absolute;
				top: 380px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>